import React from "react";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {LdhFormItem, LdhFormItemTip, LdhObjListSelect, Message} from "@biz/Components";

import BaseModal from "@biz/BaseModal";

const prefix = "bind-modal";
export default class BindModal extends BaseModal {

    constructor(props) {
        super(props);
        this.visibleStatus = "bind";
        this.title = "绑定";
        this.className = prefix;
    }

    onVisible(nextProps) {
        let {detail} = nextProps.store;
        this.title = `绑定  (${detail.geekId} / ${detail.name})`;
        if (detail.shopId) {
            this.props.action.getShopDeviceList(detail.shopId);
        }

    }


    onSubmit(values) {
        let {action, store: {detail}} = this.props;
        let {deviceId} = values;
        let {geekId} = detail;
        action.bind(geekId, deviceId, ()=>action.cancel);

    }

    handleShopChange(shopId) {
        this.props.action.getShopDeviceList(shopId, (voList = []) => {
            this.form().setFieldsValue({deviceId: ""});
            if (voList.length == 0) {
                Message.warning("当前门店不存在设备");
            }
        })
    }

    renderDetail() {
        let {shopList = [], deviceList = []} = this.props.store;
        return <div>
            <LdhFormItemTip className="form-tip">
                <ExclamationCircleOutlined/>将官网的设备和内部设备进行绑定，并修改设备的MQTT配置到我们的MQTT中心<br/>
                <ExclamationCircleOutlined/>修改后，可能需要等待几秒钟，操作才能生效
            </LdhFormItemTip>
            <LdhFormItem label="门店名称" name="shopId" required>
                <LdhObjListSelect list={shopList} onChange={this.handleShopChange.bind(this)}/>
            </LdhFormItem>

            <LdhFormItem label="内部设备" name="deviceId" required>
                <LdhObjListSelect list={deviceList}/>
            </LdhFormItem>
        </div>
    }

}